'use client'

import styles from "./CaptainsPage.module.css";
import {getObj} from "@/services/api_service";
import Button from "@/components/ui/Button/Button";
import Search from "@/components/ui/Dashboard/Search/Search";
import CaptainCard from "@/components/ui/Dashboard/Cards/CaptainCard";
import {TypeCaptain} from "@/shared/types";
import {useEffect, useState} from "react";
import {useRouter} from "next/navigation";

export type TypeCaptainCard = {
    results: [];
    count: number;
} & TypeCaptain

export default function CaptainsPage({searchParams}: {
    searchParams?: {
        search?: string;
        page?: string;
    };
}) {
    const search = searchParams?.search || '';
    let currentPage = Number(searchParams?.page) || 1;
    const [captains, setCaptains] = useState<TypeCaptainCard[]>([]);
    const [totalPages, setTotalPages] = useState<number>(1);
    const router = useRouter();

    useEffect(() => {
        const getCaptains = async () => {
            let captains: TypeCaptainCard;

            if (search) {
                captains = await getObj(`/api/ships/captains/details/?search=${search}&page=1`);
                currentPage = 1;
            } else {
                captains = await getObj(`/api/ships/captains/details/?search=${search}&page=${currentPage}`);
            }
            setCaptains(captains.results);
            setTotalPages(Math.ceil(captains.count / 10));
        }
        getCaptains();
    }, [search, currentPage]);

    const handlePageChange = (page: number) => {
        router.push(`/admin/captains?search=${search}&page=${page}`);
    };

    return (
        <div className={styles.captainPage}>
            <header className={styles.header}>
                <h1>Список капитанов</h1>
            </header>
            <div>
                <section className={styles.search_area}>
                    <Search placeholder={'Поиск капитанов'}/>
                    <Button type="button" kind="addCaptain" content="Добавить капитана"/>
                </section>
                <section className={styles.card_area}>
                    {captains ? captains.map(captain => {
                        return (
                            <CaptainCard
                                key={captain.id}
                                id={captain.id}
                                first_name={captain.first_name}
                                last_name={captain.last_name}
                                image={captain.image}
                                experience={captain.experience}
                            />
                        );
                    }) : null}
                </section>
            </div>
            <div className={styles.pagination}>
                {Array.from({length: totalPages}, (_, index) => (
                    <Button
                        key={index + 1}
                        type="button"
                        kind={index + 1 === currentPage ? "submit" : "secondary"}
                        content={`${index + 1}`}
                        onClick={() => handlePageChange(index + 1)}
                    />
                ))}
            </div>
        </div>
    );
}
